<template>
  <view class="add-study-experience">
    <view class="uni-nav-bar">新增学习经历</view>

    <!-- 表单（使用 uni-app 表单组件） -->
    <form class="experience-form">
      <view class="form-group">
        <label class="form-label">学历类型</label>
        <picker
            mode="selector"
            :range="educationTypes"
            @change="onEducationChange"
            class="form-picker"
        >
          <view class="picker-placeholder">
            {{ selectedEducation || "请选择学历类型" }}
          </view>
        </picker>
      </view>

      <view class="form-group">
        <label class="form-label">学习院校</label>
        <input
            type="text"
            placeholder="请输入学习院校"
            class="form-input"
            v-model="school"
        />
      </view>

      <view class="form-group">
        <label class="form-label">专业</label>
        <input
            type="text"
            placeholder="请输入专业"
            class="form-input"
            v-model="major"
        />
      </view>

      <view class="form-group">
        <label class="form-label">入学日期</label>
        <picker
            mode="date"
            @change="onStartDateChange"
            class="form-picker"
        >
          <view class="picker-placeholder">
            {{ startDate || "请选择入学日期" }}
          </view>
        </picker>
      </view>

      <view class="form-group">
        <label class="form-label">毕业日期</label>
        <picker
            mode="date"
            @change="onEndDateChange"
            class="form-picker"
        >
          <view class="picker-placeholder">
            {{ endDate || "请选择毕业日期" }}
          </view>
        </picker>
      </view>

      <!-- 按钮区域 -->
      <view class="form-buttons">
        <button class="cancel-btn" @click="onCancel">取消</button>
        <button class="submit-btn" @click="onSubmit">提交</button>
      </view>
    </form>
  </view>
</template>

<script>
export default {
  data() {
    return {
      educationTypes: ["本科", "硕士研究生", "博士研究生"], // 学历类型选项
      selectedEducation: "", // 选中的学历类型
      school: "", // 院校
      major: "", // 专业
      startDate: "", // 入学日期
      endDate: "" // 毕业日期
    };
  },
  methods: {
    // 学历类型选择
    onEducationChange(e) {
      this.selectedEducation = this.educationTypes[e.detail.value];
    },
    // 入学日期选择
    onStartDateChange(e) {
      this.startDate = e.detail.value;
    },
    // 毕业日期选择
    onEndDateChange(e) {
      this.endDate = e.detail.value;
    },
    // 提交
    onSubmit() {
      // 表单校验逻辑
      if (!this.selectedEducation || !this.school || !this.startDate) {
        uni.showToast({ title: "请完善必填信息", icon: "none" });
        return;
      }
      // 提交接口逻辑（ uni.request 调用后端接口）
      uni.showToast({ title: "提交成功" });
      uni.navigateBack(); // 返回上一页
    },
    // 取消
    onCancel() {
      uni.navigateBack(); // 返回上一页
    }
  }
};
</script>

<style scoped>
.add-study-experience {
  padding: 20rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}
.uni-nav-bar {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 30rpx;
}
.experience-form {
  display: flex;
  flex-direction: column;
  gap: 30rpx;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
}
.form-label {
  font-size: 28rpx;
  font-weight: 500;
}
.form-input, .form-picker {
  padding: 18rpx;
  background-color: #fff;
  border-radius: 8rpx;
  font-size: 26rpx;
  border: 2rpx solid #eee;
}
.picker-placeholder {
  color: #999;
  font-size: 26rpx;
}
.form-buttons {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 40rpx;
}
.cancel-btn {
  padding: 0 36rpx;
  border: 2rpx solid #eee;
  border-radius: 8rpx;
  background-color: #fff;
  font-size: 28rpx;
}
.submit-btn {
  padding: 0 36rpx;
  background-color: #c0392b;
  color: #fff;
  border-radius: 8rpx;
  font-size: 28rpx;
}
</style>